<template>
  <publicList
      ref="publicListRef"
      @toolChange="toolChange"
      :toolList="toolList.toolList"
      :paramsList="toolList.paramsList"
      :selectNums="ids.length"
      :queryParams="toolList.queryParams"
      @searchSubmit="searchSubmit"
      :total="total"
      @paginate="handlePaginateFun"
      :tableData="toolList.tableDataList"
      :columns="toolList.tableItem"
      :loading="loading"
      rowKey="uuid"
      @handleSelectionChange="handleSelectionChange"
  >
    <template v-slot:tableHead="head">
      {{ head.item.label }}
    </template>
    <template v-slot:tableColumn="scope">
      <span v-if="scope.scope.prop=='status'">
        {{ scope.scope.row.status == 1 ? '启用' : '禁用' }}
      </span>
      <span v-else>{{ scope.scope.row[scope.scope.prop] }}</span>
    </template>
  </publicList>

  <el-dialog
      v-model="dialogVisible"
      title="新增"
      width="40%"
      draggable
  >
    <el-form
        ref="brandFormRef"
        label-width="100px"
        :model="form.formData"
        :rules="form.formFules"
    >
      <formLabel
          :publicForm="form.basicForm"
          :formData="form.formData"
      >
      </formLabel>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
  <!--  <div class="typer-dynamic">
            <span class="cut">
              <span class="word" v-for="(letter,index) in words" :key="index">{{ letter }}</span>
            </span>
      <span class="typer-cursor"></span>
    </div>-->
  <ul>
    <template v-for="(item,index) in msg.arr" :key="index">
      <li class="">
        <typist :content="item.content"></typist>
      </li>
    </template>
  </ul>
  <el-button @click="contentPush">pushContent</el-button>
  <div class="" v-drag="true">
    <div class="dialog_content">
      <div class="dialog_drag" @dblclick.stop.prevent="dialogDragClick"></div>
    </div>
  </div>
</template>
<script>
import {ref, reactive, computed, getCurrentInstance, watch, onMounted} from "vue"
import {useStore} from 'vuex'
import {getSerialRuleByName} from "@/api/rules"
import {getBrandList, addNewBrand, getBrandByBrandNum, setBrandStatus} from "@/api/brand"
import typist from "@/components/common/typist";
import {tableMixin} from "@/mixins/tableMixin.js"
export default {
  name: "brand",
  components: {
    typist
  },
  data() {
    return {};
  },
  setup() {
    const store = useStore()
    // console.log("获取store", store.state.user.token)
    const dialogVisible = ref(false)
    const form = reactive({
      formData: {
        brandNum: "",
        brandName: "",
        status: true,
        remark: ''
      },
      basicForm: {
        title: '基本信息',
        isTitle: false,
        showSearch: true,
        data: [
          {
            label: '品牌编码',
            prop: 'brandNum',
            type: 'text', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: true, //是否禁用
            placeholder: '请输入品牌编码'
          },
          {
            label: '商品品牌',
            prop: 'brandName',
            type: 'text', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: false, //是否禁用
            placeholder: '请输入商品品牌'
          },
          {
            label: '状态',
            prop: 'status',
            type: 'switch', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: true, //是否禁用
          },
          {
            label: '备注',
            prop: 'remark',
            type: 'text', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: false, //是否禁用
            placeholder: '请输入商品备注'
          }
        ]
      }
      ,
      formFules: {
        brandName: [{
          required: true,
          message: '请输入商品品牌',
          trigger: 'blur',
        }],
        brandNum: [{
          required: true,
          message: '请输入品牌编码',
          trigger: 'blur',
        }]
      }
    })
    const brandFormRef = ref();
    const toolList = reactive({
      toolList: [
        {id: "3", label: "新增", ismul: false},
        {id: "4", label: "启用", ismul: false},
        {id: "5", label: "禁用", ismul: false},
        // {id: "1", label: "刷新", ismul: false},
        // {id: "2", label: "退出", ismul: false},
      ],
      paramsList: [
        {
          type: "2", props: "state", label: "状态", placeholder: "请选择状态",
          queryList: [{label: "已关闭", value: "1"}, {label: "已开启", value: "2"}]
        },
        {
          type: "2",
          props: "warehouse",
          label: "仓库",
          placeholder: "请选择状态",
          queryList: [{label: "已关闭", value: "1"}, {label: "已开启", value: "2"}]
        },
        {type: "1", props: "code", label: "单据编码", placeholder: "请输入单据编码",},
        {type: "4", props: "time", label: "创建时间", placeholder: "请选择时间",},
      ],
      queryParams: {
        state: [],
        warehouse: "",
        code: "",
        time: "",
        searchValue: "",
        pageNum: 1,
        pageSize: 10
      },
      tableDataList: [],
      tableItem: [
        {label: '状态', prop: 'status', align: 'left'},
        {label: '品牌编码', prop: 'brandNum', align: 'left'},
        {label: '商品品牌', prop: 'brandName', align: 'left'},
        {label: '备注', prop: 'remark', align: 'left'},
        {label: '创建人', prop: 'createNickName', align: 'left'},
        {label: '创建日期', prop: 'createTime', align: 'left'},
        {label: '更新人', prop: 'updateNickName', align: 'left'},
        {label: '更新日期', prop: 'updateTime', align: 'left'}
      ],
    });
    const {proxy} = getCurrentInstance()

    let {
      ids,
      loading,
      publicListRef,
      getTableData,
      total,
      tableDataList,
      searchSubmit,
      handlePaginateFun,
      handleSelectionChange
    } = tableMixin({
      getListApi: getBrandList,
      queryParams:toolList.queryParams,
      getListCallBack(res) {
        total.value = res.data.total;
        toolList.tableDataList =res.data.brandList;
      },
    })
    onMounted(() => {
      getTableData()
    })
    const toolChange = (e) => {
      if (e == '1') {
        searchSubmit();
      } else if (e == '3') {
        getSerialRuleByName("Brand").then((res) => {
          if (res.code == 200) {
            let businessNumber = res.msg;
            form.formData["brandNum"] = businessNumber;
            dialogVisible.value = true;
          }
        })
      } else if (e == '4' || e == '5') {
        let params = {
          idArr: ids.value,
          status: e == '4' ? 1 : 0
        }
        setBrandStatus(params).then(res => {
          proxy.$message({
            type: "success",
            message: (e === '4' ? '启用' : '禁用') + "成功"
          })
          searchSubmit();
        });
      }
    }

    const submitForm = () => {
      brandFormRef.value.validate((valid) => {
        if (valid) {
          addNewBrand(form.formData).then(res => {
            proxy.$message({
              type: "success",
              message: "操作成功"
            })
            dialogVisible.value = false;
            getTableData()
          })
        }
      })
    }
    const cancel = () => {
      dialogVisible.value = false;
    }

    let words = ref([]);
    let letters = ref([]);
    let order = ref(1);
    let str = ref("By Punk")
    let msg = reactive({
      arr: [
        {name: "小丽", content: "日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子概念"},
      ]
    })
    const contentPush = () => {
      msg.arr.push({
        name: "小丽", content: "主要从事文字输入文件的文职岗位。它出现于打字机盛行的年代，也消失于打字机没落的现代"
      })
    }
    watch(order, (newVal, oldVal) => {
      if (order.value % 4 == 1) {
        str.value = "By Punk!"
      } else if (order.value % 4 == 2) {
        str.value = "looking for a job. "
      } else if (order.value % 4 == 3) {
        str.value = "a front-end programmer."
      } else {
        str.value = "coding the web..."
      }
    })
    const begin = () => {
      letters.value = str.value.split("")
      for (var i = 0; i < letters.value.length; i++) {
        setTimeout(write(i), i * 100);
      }
    }

    const write = (i) => {
      return () => {
        let L = letters.value.length;
        words.value.push(letters.value[i]);
        /*如果输入完毕，在2s后开始删除*/
        if (i == L - 1) {
          setTimeout(function () {
            back();
          }, 2000);
        }
      }
    }
    const back = () => {
      let L = letters.value.length;
      for (var i = 0; i < L; i++) {
        setTimeout(wipe(i), i * 50);
      }
    }
    const wipe = (i) => {
      return () => {
        words.value.pop(letters.value[i]);
        /*如果删除完毕，在300ms后开始输入*/
        if (words.value.length == 0) {
          order.value++;

          setTimeout(function () {
            begin();
          }, 300);
        }
      }
    }
    begin()
    const dialogDragClick = () => {
      console.log("ads")
    }
    return {
      toolList,
      tableDataList,
      total,
      publicListRef,
      loading,
      ids,
      dialogVisible,
      form,
      brandFormRef,
      words,
      msg,
      submitForm,
      contentPush,
      cancel,
      handlePaginateFun,
      toolChange,
      handleSelectionChange,
      searchSubmit, dialogDragClick
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {},
  computed: {},
  watch: {},
  beforeDestroy() {
  },
  destroyed() {
  }
}
</script>

<style scoped lang="scss">
.dialog_content {
  position: relative;
  width: 100%;
  height: 500px;

  .dialog_drag {
    width: 38px;
    height: 38px;
    background: red;

  }
}

.typer {
  margin-top: 2%;
  box-sizing: border-box;
}

.typer .typer-content {
  font-weight: bold;
  font-size: 50px;
  display: flex;
  flex-direction: row;
  letter-spacing: 2px
}

.typer-dynamic {
  position: relative;
}

.cut {
  color: #e84d49;
}

.typer-cursor {
  position: absolute;
  height: 100%;
  width: 3px;
  top: 0;
  right: -10px;
  background-color: #e84d49;
  animation: flash 1.5s linear infinite;
}
</style>